var tabs = document.getElementsByClassName("tabs")[0];
var right_arr = document.getElementsByClassName("right-arr")[0];
var left_arr = document.getElementsByClassName("left-arr")[0];
// 点击右侧按钮时，滚动内容
right_arr.addEventListener('click', () => {
    const scrollAmount = 100; // 每次滚动的距离
    const currentScrollLeft = tabs.scrollLeft;
    const maxScrollLeft = tabs.scrollWidth - tabs.offsetWidth;

    if (currentScrollLeft + scrollAmount < maxScrollLeft) {
        tabs.scrollLeft += scrollAmount;
    } else {
        // 如果已经滚动到最大位置，停止滚动并隐藏右侧按钮，显示左侧按钮
        tabs.scrollLeft = maxScrollLeft;
        right_arr.style.display = "none";
        left_arr.style.display = "block";
    }
});
// 点击左侧按钮时，滚动内容
left_arr.addEventListener('click', () => {
    const scrollAmount = 100; // 每次滚动的距离
    const currentScrollLeft = tabs.scrollLeft;

    if (currentScrollLeft - scrollAmount > 0) {
        tabs.scrollLeft -= scrollAmount;
    } else {
        // 如果已经滚动到最左侧，停止滚动并隐藏左侧按钮，显示右侧按钮
        tabs.scrollLeft = 0;
        left_arr.style.display = "none";
        right_arr.style.display = "block";
    }
});

// 监听滚动事件，动态切换按钮显示状态
tabs.addEventListener('scroll', () => {
    const currentScrollLeft = tabs.scrollLeft;
    const maxScrollLeft = tabs.scrollWidth - tabs.offsetWidth;

    if (currentScrollLeft === 0) {
        // 如果滚动到最左侧，隐藏左侧按钮，显示右侧按钮
        left_arr.style.display = "none";
        right_arr.style.display = "block";
    } else if (currentScrollLeft === maxScrollLeft) {
        // 如果滚动到最右侧，隐藏右侧按钮，显示左侧按钮
        right_arr.style.display = "none";
        left_arr.style.display = "block";
    } else {
        // 如果在中间，显示两个按钮
        left_arr.style.display = "block";
        right_arr.style.display = "block";
    }
});


document.addEventListener("DOMContentLoaded", function () {
    const carouselItems = document.querySelectorAll(".carousel-item");
    const dots = document.querySelectorAll(".dot");

    let activeIndex = 0;

    function showSlide(index) {
        carouselItems.forEach((item) => {
        item.classList.remove("active");
        });
        dots.forEach((dot) => {
        dot.classList.remove("active");
        });

        carouselItems[index].classList.add("active");
        dots[index].classList.add("active");
    }

    // 初始化显示第一张幻灯片
    showSlide(activeIndex);

    // 点击圆圈切换幻灯片
    // dots.forEach((dot, index) => {
    //     dot.addEventListener("click", () => {
    //     activeIndex = index;
    //     showSlide(activeIndex);
    //     });
    // });

    // 鼠标移入（mouseenter）圆圈切换幻灯片
    dots.forEach((dot, index) => {
        dot.addEventListener("mouseenter", () => {
        activeIndex = index;
        showSlide(activeIndex);
        });
    });

    // 自动播放（可选）
    setInterval(() => {
        activeIndex = (activeIndex + 1) % carouselItems.length;
        showSlide(activeIndex);
    }, 3000);
});

// 获取所有的li元素
const listItems = document.querySelectorAll('.commodity-list li');

// 为每个li元素添加点击事件监听器
listItems.forEach(item => {
    item.addEventListener('click', function() {
        // 移除所有li元素上的commodity-list-active类
        listItems.forEach(li => li.classList.remove('commodity-list-active'));
        
        // 为点击的li元素添加commodity-list-active类
        this.classList.add('commodity-list-active');
    });
});

// 登录和注册链接点击事件
// 遍历所有具有类名 'login-link' 的元素，并对每个元素执行指定的操作
document.querySelectorAll('.login-link').forEach(link => {
    link.addEventListener('click', function(e) {
        e.preventDefault();
        window.location.href = 'login.html';
    });
});

document.querySelectorAll('.register-link').forEach(link => {
    link.addEventListener('click', function(e) {
        e.preventDefault();
        window.location.href = 'register.html';
    });
});

// 地区切换
document.addEventListener('DOMContentLoaded', (event) => {
    const regionDropdownItems = document.querySelectorAll('.region-dropdown li');
    const currentRegionSpan = document.querySelector('.current-region');

    regionDropdownItems.forEach(item => {
        item.addEventListener('click', () => {
            // 如果点击的li没有region-active类，则进行操作
            if (!item.classList.contains('region-active')) {
                // 移除所有li的region-active类
                regionDropdownItems.forEach(i => {
                    i.classList.remove('region-active');
                });

                // 添加region-active类给被点击的li
                item.classList.add('region-active');

                // 更新current-region的内容为被点击的li的内容
                currentRegionSpan.textContent = item.querySelector('a').textContent;
            }
        });
    });
});

// 搜索框随机词条产生器
window.onload = function() {
    var searchTerms = ["手机", "电脑", "家电", "服装", "食品", "图书", "家居"];
    var searchInput = document.getElementById("search-input");

    function changeSearchTerm() {
        var randomIndex = Math.floor(Math.random() * searchTerms.length);
        searchInput.value = searchTerms[randomIndex];
    }

    // 初始设置一个搜索词条
    changeSearchTerm();

    // 每隔1秒更改一次搜索词条
    setInterval(changeSearchTerm, 1000);
};


